import { CommandDialog } from '@amcax/base';
import i18n from '@app-cad/common/utils/i18next';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useEffect, useState } from 'react';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { CenterRadius } from './center-radius';
import { TwoGuideRadius } from './two-guides-radius';
import { CenterAndTwoAngles } from './center-two-angles';
import { OneGuideRadiusAndTangencySurface } from './one-guide-tangency-surface';
import { TwoGuidesAndTangencySurface } from './two-guides-tangency-surface';
import { ThreeGuides } from './three-guides';
import { CurveOnTangencySurface } from './curve-on-tangency-surface';

const CmdCircleSweep = ({ title, onClose, props }: CurvedCmdDialogParams) => {
  const [mode, setMode] = useState<
    | 'CenterAndRadius'
    | 'TwoGuidesAndRadius'
    | 'CenterAndTwoAngles'
    | 'CurveOnTangencySurface'
    | 'OneGuideAndTangencySurface'
    | 'TwoGuidesAndTangencySurface'
    | 'ThreeGuides'
  >('CenterAndRadius');

  // props需要为state，以确保props和mode同时更新，分发的模式不会收到错误的props
  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    setMode(props?.params?.mode ?? 'CenterAndRadius');
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'>
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='类型'>
        <Select
          options={[
            { value: 'CenterAndRadius', label: '圆心和半径' },
            { value: 'TwoGuidesAndRadius', label: '两点和半径' },
            { value: 'CenterAndTwoAngles', label: '中心和两个角度' },
            { value: 'CurveOnTangencySurface', label: '限制曲线和切面' },
            { value: 'OneGuideAndTangencySurface', label: '一条引导线和切面' },
            { value: 'TwoGuidesAndTangencySurface', label: '两条引导线和切面' },
            { value: 'ThreeGuides', label: '三条引导线' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'CenterAndRadius' && (
        <CenterRadius
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'TwoGuidesAndRadius' && (
        <TwoGuideRadius
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'CenterAndTwoAngles' && (
        <CenterAndTwoAngles
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'CurveOnTangencySurface' && (
        <CurveOnTangencySurface
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'OneGuideAndTangencySurface' && (
        <OneGuideRadiusAndTangencySurface
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'TwoGuidesAndTangencySurface' && (
        <TwoGuidesAndTangencySurface
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'ThreeGuides' && (
        <ThreeGuides
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
    </CommandDialog>
  );
};

export const cmdCircularSweep: CurvedBaseCommand = {
  id: 'CmdCircularSweep',
  label: 'command.circular-sweep',
  icon: 'commands/curved/circular-sweep',
  help: {
    remark: 'tips.redo',
  },
  create: (label, onClose, props) => (
    <CmdCircleSweep
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
